<template>
	<!-- 配置弹窗 -->
	<view class="mask" @click="closePoster">
		<view class="poster-box">
			<image :src="posterImg" @tap.stop="jump" class="poster-img" mode="widthFix"></image>
			<image src="../../static/detail/close.png" @tap.stop="closePoster" class="closePoster" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"popups",
		props:{
			posterImg: {
				type: String,
				default: ''
			},
		},
		data() {
			return{}
		},
		methods: {
			// 关闭
			closePoster(){
				this.$emit('closePoster');
			},
			// 跳转
			jump(info){
				this.$emit('jump');
			}
		}
	}
</script>

<style lang="scss">
.mask {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;left:0;
	z-index: 999;
}
// 首页配置海报
.poster-box {
	width: 600rpx;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	left: 50%;
	margin-left: -300rpx;
	.poster-img {
		width: 100%;
		display: block;
	}
	.closePoster {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		margin-left: -24rpx;
	}
	.poster-tip {
		color: #eee;
		position: absolute;
		bottom: -80rpx;
		left: 10rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
</style>